<template>
  <TopHeader>
    <template #dialog>
      <el-button class="dialog-btn" @click="dialogVisible = true">
        i
      </el-button>
    </template>
  </TopHeader>
  <!-- 提示框 -->
  <el-dialog
    v-model="dialogVisible"
    class="dialog"
    width="420px"
    height="400px"
  >
    <div class="msg">
      <h3>关于:</h3>
      <span>这个应用可以用来追踪你选择城市的当前天气</span>
      <h3>如何使用:</h3>
      <span>1.点击搜索框输入你希望追踪的城市</span>
      <span>2.在搜索结果中选中一个城市，你将获取当地最新的天气</span>
      <span>3.点击右侧的＋号可以将追踪城市的天气情况保存在首页</span>
      <h3>移除城市:</h3>
      <span>如果你不想在首页关注某个城市,可以通过底部的按钮删除它</span>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="dialogVisible = false"
          color="#00668a"
        >
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 城市列表部分 -->
  <div class="wrap search">
    <input
      class="ipt"
      placeholder="请输入城市名字"
      v-model="inputValue"
      @keyup.enter="handleInputChange"
    />
    <!-- 下拉列表 -->
    <div v-if="cityInfo.length">
      <ul class="select" >
        <li v-for="item in cityInfo" :key="item.code" @click="checkTheWeather(item.name)">{{ item.name }}</li>
      </ul>
    </div>
    <!-- 添加的城市列表 -->
    <ul class="city-list" v-if="cityStore.cityList.length">
      <li v-for="item in cityStore.cityList" :key="item.id">
        <div class="city-item">
          <h4>{{ item.city }}</h4>
          <div class="temperature">{{ item.daytemp }}度</div>
        </div>
        <div class="button-box">
          <button @click="checkTheWeather(item.city)">查看</button>
          <button @click="delCity(item.city)">删除</button>
        </div>
      </li>
    </ul>
    <div class="empty" v-else>
      暂时没有保存过城市天气信息，请查询后点击右上角"+"号保存。 近期天气
    </div>
  </div>
  <div class="title wrap">近期天气</div>
  <weather-forecast />
</template>
<script setup>
import { ref } from 'vue'
// 引入pinia仓库
import { useCityStore } from '@/stores'
import router from '@/router'
import { getCityInfo } from '@/api/weather'
// 定义提示框,默认隐藏
const dialogVisible = ref(false)
const cityStore = useCityStore()
// 存储输入框的值
const inputValue = ref('')
// 存储请求的城市列表
const cityInfo = ref([])
// 按钮查看天气方法
const checkTheWeather = city => {
  // 跳转路由,携带城市名
  router.push({ path: '/details', query: { city: city } })
}
// 按钮删除城市的方法(从仓库中删除)
const delCity = city => {
  cityStore.cityList = cityStore.cityList.filter(item => item.city !== city)
}
// 当回车时触发
const handleInputChange = async () => {
  cityInfo.value = await getCityInfo(inputValue.value)
  console.log( cityInfo.value)
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  color: #fff;
  padding-bottom: 10px;
}
// 右侧按钮
.dialog-btn {
  width: 30px;
  height: 30px;
  border-radius: 30px;
}
// 提示框
.dialog {
  .msg {
    display: flex;
    flex-direction: column;
    h3 {
      font-size: 18px;
      height: 30px;
    }
    span {
      display: block;
      height: 30px;
    }
  }
}
@import '../assets/main.scss';
.search {
  font-size: 16px;
  color: $text-color;
  margin-bottom: 30px;
  .ipt {
    height: 25px;
    margin-top: 30px;
    padding: 5px;
    width: 100%;
    background-color: transparent;
    border: 0;
    color: $text-color;
    border-bottom: 1px solid #ccc;
    &:focus {
      outline: 2px solid transparent;
      outline-offset: 2px;
      border: 0;
      box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
    }
    &::placeholder {
      color: #d5d3d3;
    }
  }
  .select {
    border-radius: 5px;
    li {
      height: 30px;
      line-height: 30px;
      background-color: #fff;
      color: #000;
      padding: 5px;
      transition-duration: 0.3s;
      &:hover {
        background-color: #ccc;
        cursor: pointer;
      }
    }
  }
  .city-list {
    li {
      height: 40px;
      margin: 20px 0;
      display: flex;
      justify-content: space-between;
      transition-duration: 0.3s;
      .city-item {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 8px 12px;
        background-color: $box-color;
        display: flex;
        justify-content: space-between;
        transition: all 0.5s;
      }
      .button-box {
        width: 200px;
        display: none;
        button {
          width: 100px;
          height: 56px;
          margin: 0 5px;
          background-color: $btn-color;
          border: 0;
          color: #fff;
          &:hover {
            background-color: #bb8c01;
            cursor: pointer;
          }
        }
      }
      &:hover {
        .button-box {
          display: flex;
        }
      }
    }
  }
  .empty {
    padding: 20px 0;
    text-align: center;
  }
}
</style>
